<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>免费内网穿透 | 注册</title>
    <link rel="shortcut icon" href="${request.contextPath}/icon/favicon.ico">
    <link href="${request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <link href="${request.contextPath}/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="${request.contextPath}/css/animate.css" rel="stylesheet">
    <link href="${request.contextPath}/css/style.css" rel="stylesheet">
</head>
<style>
    /*按钮的class是通过浏览器的查看元素功能知道的*/
    body .layerBtn .layui-layer-btn0 {
        color: #FFF;
    }

    body .layerBtn .layui-layer-btn1 {
        color: #333;
    }
</style>
<body class="gray-bg">
<div class="middle-box text-center loginscreen  animated fadeInDown">
    <div>
        <div>
            <h1 class="logo-name">P+</h1>
        </div>
        <h3>欢迎注册 P+ 账号</h3>
        <form id="register" class="m-t" role="form">
            <div class="form-group">
                <input type="email" name="email" class="form-control" placeholder="请输入邮箱地址" required>
            </div>
            <div class="form-group">
                <input type="password" name="password" class="form-control" placeholder="请输入密码" required>
            </div>
            <#--            <div class="form-group">-->
            <#--                <div class="checkbox i-checks">-->
            <#--                    <label>-->
            <#--                        <input type="checkbox"><i></i> 同意 P+ 协议-->
            <#--                    </label>-->
            <#--                </div>-->
            <#--            </div>-->
            <a id="registerBtn" href="javascript:void(0);" class="btn btn-primary block full-width m-b">注 册</a>

            <p class="text-muted text-center"><small>已拥有账号?</small></p>
            <a class="btn btn-sm btn-white btn-block" href="${request.contextPath}/admin/login.html">前去登录</a>
        </form>
    </div>
</div>

<script src="${request.contextPath}/js/jquery-3.1.1.min.js"></script>
<script src="${request.contextPath}/js/popper.min.js"></script>
<script src="${request.contextPath}/js/bootstrap.js"></script>
<script src="${request.contextPath}/layer/layer.js"></script>
<script src="${request.contextPath}/js/qs.js"></script>
</body>
<script type="text/javascript">
    $(function () {
        $("#registerBtn").click(function () {
            let obj = Qs.parse($("#register").serialize());
            if (obj.email === "") {
                layer.alert("邮箱地址不能为空", {
                    icon: 0,
                    skin: 'layerBtn'
                });
                return false;
            }
            if (obj.password === "") {
                layer.alert("密码不能为空", {
                    icon: 0,
                    skin: "layerBtn"
                });
                return false;
            }
            const index = layer.load(1, {
                shade: [0.1, "#000"]
            });
            let res = $.ajax({
                url: "${request.contextPath}/admin/register/action",
                contentType: "application/json",
                type: "POST",
                dataType: "JSON",
                data: JSON.stringify(obj),
                async: false
            }).responseText;
            layer.close(index);
            res = JSON.parse(res);
            if (res.code === "200") {
                layer.alert("注册成功", {
                    icon: 1,
                    skin: "layerBtn"
                });
            } else {
                layer.alert(res.message, {
                    icon: 2,
                    skin: "layerBtn"
                });
            }
        });
    });
</script>
</html>
